<template>
  <div class="iconisaction">
    <ul class="Home-body-ul">
      <li
        class="Home-body-li"
        :class="{'isAction':isActionIndex==index}"
        v-for="(item, index) in region"
        :key="item.id"
        @mouseover="()=>{HandHomeLiover(index)}"
      >
        <div class="Home-body-li-img">
          <img :src="item.icon" />
        </div>
        <div class="Home-body-li-txt">{{item.Country}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    HandHomeLiover(index) {
      this.$emit("changAction", index);
    }
  },
  props: {
    isActionIndex: Number,
    region: Array
  }
};
</script>

<style lang='scss'>
.iconisaction {
  .Home-body-ul {
    display: flex;
    justify-content: center;
    .Home-body-li {
      cursor: pointer;
      width: 70px;
      height: 64px;
      background: url("/img/t-bg-1.png") no-repeat;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-left: 2px;
      &.isAction {
        background: url("/img/t-bg-2.png") no-repeat;
      }
      .Home-body-li-img {
        margin-top: -10px;
      }
      .Home-body-li-txt {
        font-size: 14px;
        color: #fff;
      }
    }
  }
}
</style>